import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:get_storage/get_storage.dart';
import 'package:loading_animation_widget/loading_animation_widget.dart';
import 'package:share_fit/app/components/back_btn_icon.dart';
import 'package:share_fit/app/helper/ext/tr_ext.dart';
import 'package:share_fit/app/tools/color_const.dart';
import 'package:share_fit/generated/locales.g.dart';

import 'device_search_logic.dart';

class DeviceSearchPage extends StatelessWidget {
  DeviceSearchPage({super.key});

  final logic = Get.put(DeviceSearchLogic());
  final state = Get.find<DeviceSearchLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(LocaleKeys.device_search.ts),
        centerTitle: true,
        leading: BackBtnIcon(onTap: () => Get.back()),
      ),
      body: Padding(
        padding: const EdgeInsets.only(top: 20, left: 20, right: 20),
        child: GetBuilder<DeviceSearchLogic>(
          init: logic,
          builder: (logic) {
            if (state.isBluetoothEnable) {
              return _btEnabledView(context);
            }
            else  {
              return _btDisabledView(context);
            }
          },
        ),
      ),
    );
  }


  Widget _btEnabledView(BuildContext context) {
    return Container(
      alignment: Alignment.topCenter,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          SizedBox(height: 245.h),
          Text(
            LocaleKeys.device_searching.ts,
            style: TextStyle(
              fontSize: 72.sp,
            ),
          ),
          SizedBox(height: 56.h),
          Text(
            LocaleKeys.device_searching_tips.ts,
            style: TextStyle(
              fontSize: 48.sp,
              color: Colors.black,
            ),
          ),
          SizedBox(height: 137.h),
          Image.asset(
            'assets/images/device/device_searching.png',
            height: 588.h,
            fit: BoxFit.cover,
          ),
          SizedBox(height: 56.h),
          Obx(()=> Offstage(
            offstage: !state.isScanning.value,
            child: LoadingAnimationWidget.staggeredDotsWave(
              color: const Color(0xffff6630),
              size: 50,
            ),
          )),
        ],
      ),
    );
  }

  Widget _btDisabledView(BuildContext context) {
    return Container(
      alignment: Alignment.topCenter,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Expanded(child:Container(
            constraints: BoxConstraints(minHeight:20.h, maxHeight: 200.h),
          )),
          Image.asset(
            'assets/images/device/device_search.png',
            height: 588.h,
            fit: BoxFit.cover,
          ),
          Expanded(child:Container(
            constraints: BoxConstraints(minHeight:20.h, maxHeight: 200.h),
          )),
          Text(
            LocaleKeys.device_search_des.ts,
            style: TextStyle(
              fontSize: 54.sp,
            ),
          ),
          Expanded(child:Container(
            constraints: BoxConstraints(minHeight:20.h, maxHeight: 67.h),
          )),
          Text(
            LocaleKeys.device_search_tips.ts,
            style: TextStyle(
              fontSize: 48.sp,
              color: Colors.black,
            ),
          ),
          Expanded(child:Container(
            constraints: BoxConstraints(minHeight:20.h, maxHeight: 200.h),
          )),
          SizedBox(
            width: double.infinity,
            child: SizedBox(
              child: CupertinoButton(
                borderRadius: BorderRadius.circular(40.w),
                color: ColorConst.accentColor,
                onPressed: () {
                  logic.retry();
                },
                child: Text(
                  LocaleKeys.device_search_retry.ts,
                  style: const TextStyle(color: Colors.white, fontSize: 17),
                ),
              ),
            ),
          ),
          Expanded(child: Container()),
        ],
      ),
    );
  }
}
